<template>
<div class="app-container">
  <el-form :inline="true" class="demo-form-inline">
    <el-row>
      <div class="demo-input-suffix">
        时间类型：
        <el-select v-model="form.type" placeholder="请选择">
          <el-option label="发布时间" value="registerTime"></el-option>
          <el-option label="平台处理时间" value="testTime"></el-option>
          <el-option label="商家应征时间" value="busTime"></el-option>
          <el-option label="服务时间" value="serviceTime"></el-option>
          <el-option label="购买时间" value="buyTime"></el-option>
        </el-select>
        <el-date-picker type="date" placeholder="选择日期" v-model="form.date1">
        </el-date-picker>
        <el-time-picker type="fixed-time" placeholder="选择时间" v-model="form.date2">
        </el-time-picker>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </div>
    </el-row>
    <el-row>
      <div class="demo-input-suffix">
        <el-select v-model="form.bus" placeholder="订单编号">
          <el-option label="订单编号" value="orderId"></el-option>
          <el-option label="发布人" value="Register"></el-option>
          <el-option label="服务商家" value="serviceBus"></el-option>
          <el-option label="服务标题" value="serviceTitle"></el-option>
        </el-select>
        <el-input v-model="form.mes" placeholder="请输入"></el-input>
        <el-select v-model="form.state" placeholder="全部">
          <el-option label="全部" value="all"></el-option>
          <el-option label="待平台处理" value="wait"></el-option>
          <el-option label="已完成" value="finsh"></el-option>
          <el-option label="失效发布" value="unUse"></el-option>
          <el-option label="取消发布" value="unRegister"></el-option>
        </el-select>
      </div>
    </el-row>
  </el-form>

  <el-table :data="tableData" id="out-table">
    <el-table-column type="selection">
    </el-table-column>
    <el-table-column type="index">
    </el-table-column>
    <el-table-column
      v-for="item in tableList"
      :key="item._id"
      :prop="item.value"
      :label="item.name"
      align="center">
    </el-table-column>
    <el-table-column label="操作" align="left" width="200">
      <template slot-scope="scope">
        <el-button
          size="mini"
          type="primary"
          @click="gotoDetail(scope.$index)">详情</el-button>
        <el-button
          size="mini"
          type="danger"
          v-if="scope.row.state == '待成团'"
          @click="upSend(scope.$index)">下架</el-button>
        <el-button
          size="mini"
          type="warning"
          v-if="scope.row.state == '已取消'||scope.row.state == '拼团失败'"
          @click="reSend(scope.$index)">重新发布</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="block">
    <el-button class="upload" @click="exportExcel">导出excal
    </el-button>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 50]"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totals">
    </el-pagination>
  </div>
</div>
</template>

<script>
import request from '@/utils/request'
import { formatDate,toDate,toUnix } from '@/utils/index'
import { validateOrderStatus,Excel } from '@/utils/validate'
export default {
  created: function() {
    // this.axios.post(this.domain, formdata, config).then(res => {
    //     const video = 'http://' + this.qiniuaddr + '/' + res.data.key
    //     this.videoUrl.push(video)
    // })
  },
  methods: {
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    onSubmit() {

    },
    exportExcel() {
      Excel('#out-table')
    }
  },
  filters: {
    isStart: function(value) {
      if (!value || value == '') return '订单详情'
      return value
    }
  },
  data() {
    return {
      form: {
        bus: '',
        mes: '',
        state: '',
        type: '',
        date1: '',
        date2: ''
      },
      tableData: [],
      tableList: [
        { name: '订单编号', value: '_id' },
        { name: '发布联系人方式', value: 'one' },
        { name: '服务分类', value: 'two' },
        { name: '服务标题', value: 'title' },
        { name: '服务时间', value: 'money' },
        { name: '服务商家', value: 'btime' },
        { name: '服务价格', value: 'etime' },
        { name: '发布时间', value: 'area' },
        { name: '平台处理时间', value: 'address' },
        { name: '支付时间', value: 'radius' },
        { name: '状态', value: 'state' },
      ],
      currentPage: 1,
      size: 10,
      totals: 0,
    }
  }
}
</script>
<style scoped>
  .el-col{
    margin: 5px;
  }
  .el-row{
    margin: 10px 0;
  }
  .demo-input-suffix div{
    margin-right: 10px;
  }
  .el-table{
    margin-bottom: 10px;
  }
  .upload{
    float: right;
  }
  .el-input{
    width: 200px;
  }
  .el-select{
    width: 160px;
  }
</style>
